<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
		</view>
		
		<!-- 主内容区域 -->
		<view class="main-content">

			
			<!-- 优惠券列表框架 -->
			<view class="coupon-list-wrapper">
				<!-- 优惠券列表 -->
				<view class="coupon-list">
				<!-- 优惠券1 - 可领取 -->
				<view class="coupon-card available" @click="claimCoupon(1)">
					<view class="coupon-left">
						<text class="discount-symbol">¥</text>
						<text class="discount-amount">20</text>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<view class="coupon-info">
							<text class="usage-condition">满200元可用</text>
							<text class="usage-limit">仅限于XX加油站使用</text>
							<text class="validity-period">2020.04.11—2023.05.11</text>
						</view>
						<view class="action-button">领取 ></view>
					</view>
				</view>
				
				<!-- 优惠券2 - 已领取 -->
				<view class="coupon-card claimed">
					<view class="coupon-left">
						<text class="discount-symbol">¥</text>
						<text class="discount-amount">20</text>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<view class="coupon-info">
							<text class="usage-condition">满200元可用</text>
							<text class="usage-limit">仅限于XX加油站使用</text>
							<text class="validity-period">2020.04.11—2023.05.11</text>
						</view>
						<view class="action-button claimed">已领取 ></view>
					</view>
				</view>
				
				<!-- 优惠券3 - 可领取 -->
				<view class="coupon-card available" @click="claimCoupon(3)">
					<view class="coupon-left">
						<text class="discount-symbol">¥</text>
						<text class="discount-amount">50</text>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<view class="coupon-info">
							<text class="usage-condition">满500元可用</text>
							<text class="usage-limit">仅限于XX洗车店使用</text>
							<text class="validity-period">2024.01.01—2024.12.31</text>
						</view>
						<view class="action-button">领取 ></view>
					</view>
				</view>
				
				<!-- 优惠券4 - 可领取 -->
				<view class="coupon-card available" @click="claimCoupon(4)">
					<view class="coupon-left">
						<text class="discount-symbol">¥</text>
						<text class="discount-amount">100</text>
					</view>
					<view class="coupon-divider"></view>
					<view class="coupon-right">
						<view class="coupon-info">
							<text class="usage-condition">满1000元可用</text>
							<text class="usage-limit">仅限于XX维修店使用</text>
							<text class="validity-period">2024.01.01—2024.06.30</text>
						</view>
						<view class="action-button">领取 ></view>
					</view>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				coupons: [
					{
						id: 1,
						amount: 20,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						status: 'available'
					},
					{
						id: 2,
						amount: 20,
						condition: '满200元可用',
						limit: '仅限于XX加油站使用',
						validity: '2020.04.11—2023.05.11',
						status: 'claimed'
					}
				]
			}
		},
		methods: {
			claimCoupon(couponId) {
				uni.showModal({
					title: '确认领取',
					content: '确定要领取这张优惠券吗？',
					success: (res) => {
						if (res.confirm) {
							// 模拟领取成功
							uni.showToast({
								title: '领取成功',
								icon: 'success'
							});
							
							// 更新优惠券状态
							this.updateCouponStatus(couponId);
						}
					}
				});
			},
			updateCouponStatus(couponId) {
				// 这里可以更新优惠券状态
				console.log('优惠券ID:', couponId, '已领取');
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f8f9fa;
		display: flex;
		flex-direction: column;
	}
	
	/* 头部样式 */
	.header {
		height: 0;
		background-color: #1976d2;
		position: relative;
		z-index: 100;
	}
	
	/* 主内容区域 */
	.main-content {
		flex: 1;
		padding: 0;
		background-color: white;
	}
	
	/* 蓝色模块 */
	.blue-module {
		background-color: #1976d2;
		padding: 40rpx 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.module-title {
		color: white;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	/* 优惠券列表框架 */
	.coupon-list-wrapper {
		background-color: white;
		border-radius: 24rpx 24rpx 0 0;
		margin-top: -20rpx;
		position: relative;
		z-index: 10;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 优惠券列表 */
	.coupon-list {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 32rpx 24rpx;
	}
	
	/* 优惠券卡片 */
	.coupon-card {
		background: white;
		border-radius: 12rpx;
		padding: 0;
		display: flex;
		flex-direction: row;
		position: relative;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.15);
		overflow: hidden;
		height: 120rpx;
		margin-bottom: 24rpx;
		transition: all 0.3s ease;
	}
	
	.coupon-card.claimed {
		opacity: 0.7;
		background: white;
	}
	
	/* 优惠券左侧金额区域 */
	.coupon-left {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
		border-radius: 12rpx 0 0 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		position: relative;
		overflow: hidden;
	}
	
	.coupon-left::after {
		content: '';
		position: absolute;
		right: -8rpx;
		top: 50%;
		transform: translateY(-50%);
		width: 16rpx;
		height: 16rpx;
		background-color: #f8f9fa;
		border-radius: 50%;
		z-index: 1;
	}
	
	/* 优惠券右侧信息区域 */
	.coupon-right {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		padding: 16rpx 20rpx;
		background: white;
		border-radius: 0 12rpx 12rpx 0;
		position: relative;
		overflow: visible;
	}
	
	/* 优惠券信息区域 */
	.coupon-info {
		display: flex;
		flex-direction: column;
		gap: 4rpx;
		flex: 1;
		margin-bottom: 8rpx;
	}
	
	.discount-symbol {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
		margin-bottom: -8rpx;
	}
	
	.discount-amount {
		color: white;
		font-size: 48rpx;
		font-weight: bold;
		line-height: 1;
	}
	
	/* 优惠券分隔线 */
	.coupon-divider {
		display: none;
	}
	
	.usage-limit {
		font-size: 22rpx;
		color: #999;
		line-height: 1.3;
		font-weight: 400;
	}
	
	.usage-condition {
		font-size: 26rpx;
		color: #ff6b35;
		font-weight: 600;
		line-height: 1.3;
	}
	
	.validity-period {
		font-size: 20rpx;
		color: #999;
		line-height: 1.3;
		font-weight: 400;
	}
	
	.action-button {
		background: linear-gradient(135deg, #ff6b35, #ff8c42);
		color: white;
		font-size: 20rpx;
		font-weight: 600;
		padding: 20rpx 60rpx;
		border-radius: 12rpx;
		text-align: center;
		min-width: 60rpx;
		align-self: flex-end;
		margin-top: -100rpx;
		position: relative;
		z-index: 2;
	}
	
	.action-button.claimed {
		background: #e0e0e0 !important;
		color: #999 !important;
		padding: 20rpx 60rpx !important;
		font-size: 20rpx !important;
		font-weight: 600 !important;
		border-radius: 12rpx !important;
		text-align: center !important;
		min-width: 60rpx !important;
		align-self: flex-end !important;
		margin-top: -100rpx !important;
		position: relative !important;
		z-index: 2 !important;
	}
	
	/* 已领取优惠券特殊样式 */
	.coupon-card.claimed .discount-symbol,
	.coupon-card.claimed .discount-amount {
		opacity: 0.7;
	}
	
	.coupon-card.claimed .usage-limit,
	.coupon-card.claimed .usage-condition,
	.coupon-card.claimed .validity-period {
		opacity: 0.7;
	}
	
	/* 点击效果 */
	.coupon-card.available:active {
		transform: scale(0.98);
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	}
	
	.coupon-card.available:hover {
		transform: translateY(-2rpx);
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
	}
</style>
